<template>
    <transition name="slide-right">
        <div v-show="visible" class="drawer-container" style="width:350px;">
            <div class="drawer-content">
                <!-- 抽屉头部 -->
                <div class="drawer-header">
                    <h3>{{ title }}</h3>
                    <el-button type="text" icon="Close" :size="small" @click="handleClose"></el-button>
                </div>
                <!-- 抽屉内容 -->
                <div class="drawer-body">
                    <slot></slot>
                </div>
                <!-- 抽屉底部 -->
                <div v-if="showFooter" class="drawer-footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </transition>
</template>
  
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '抽屉标题'
    },
    showFooter: {
        type: Boolean,
        default: true
    }
});

const emits = defineEmits(['update:visible', 'close']);

// 关闭抽屉
const handleClose = () => {
    emits('update:visible', false);
    emits('close');
};

</script>
  
<style scoped>
/* 抽屉容器样式 */
.drawer-container {
    position: absolute;
    color: #ffffff;
    top: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, #2E3E50, #3A4A61);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    border-radius: 10px;
    overflow: hidden;
    /* transition: transform 0.3s ease; */
}

/* 抽屉内容样式 */
.drawer-content {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    height: 100%;
}

/* 抽屉头部样式 */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #089df3;
}

.drawer-header h3 {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
}

/* 抽屉主体样式 */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* 抽屉底部样式 */
.drawer-footer {
    padding: 16px;
    border-top: 1px solid #089df3;
    text-align: right;
}

/* 动画类 */
.slide-right-enter-active,
.slide-right-leave-active {
    transition: transform 0.3s ease-out;
}

.slide-right-enter-from,
.slide-right-leave-to {
    transform: translateX(100%);
}

.slide-right-enter-to,
.slide-right-leave-from {
    transform: translateX(0);
}
</style>    